<template>
  <div class="max">
    <my-header :backBtn="checking"></my-header>
    <div class="cont-nof">
      <div class="add_title" v-if="step == 4">绑定审核中</div>
      <div
        class="add_block oh"
        v-if="step == 0 || step == 1 || step == 3 || step == 4"
      >
        <div class="add_title">宝宝信息</div>
        <div class="add_search_item tl">
          <div class="search_name fl">宝宝姓名</div>
          <div class="search_input fr required" v-if="step == 0">
            <input
              type="text"
              placeholder="请输入宝宝姓名"
              v-model="search_form.name"
              @input="queryFn"
              @blur="required(search_form.name, '宝宝名字')"
            />
          </div>
          <div class="search_cont fl" v-else>{{ post_form.name }}</div>
        </div>
        <div class="add_search_item tl">
          <div class="search_name fl">宝宝班级</div>
          <div class="search_input required fr" v-if="step == 0">
            <select v-model="search_form.clazzId" @change="selectClazz">
              <option :value="item.id" v-for="item in clazzList">
                {{ item.gradeName }}-{{ item.name }}
              </option>
            </select>
          </div>
          <div class="search_cont fl" v-else>{{ post_form.clazzName }}</div>
        </div>
        <div class="add_search_item tl" v-if="step == 0">
          <div class="search_name fl">IC卡号</div>
          <div class="search_input fr">
            <input
              type="text"
              placeholder="请输入宝宝IC卡号"
              v-model="post_form.icCard"
            />
          </div>
        </div>
        <div v-if="step == 0" class="add_search_item tl red-text">
          温馨提示：带 * 号为必填项
        </div>
        <template v-if="step == 1 || step == 3 || step == 4">
          <div class="add_search_item tl">
            <div class="search_name fl">性别</div>
            <div
              class="search_input fr required"
              v-if="step == 1 && active == -1"
            >
              <select v-model="post_form.sex">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="search_cont fl" v-else>{{ post_form.sex }}</div>
          </div>
          <div class="add_search_item tl">
            <div class="search_name fl">出生年月</div>
            <div
              class="search_input fr required"
              v-if="step == 1 && active == -1"
            >
              <input type="date" v-model="post_form.birthday" />
            </div>
            <div class="search_cont fl" v-else>
              {{ post_form.birthday.substring(0, 11) }}
            </div>
          </div>
          <div class="add_search_item tl" v-if="post_form.code != ''">
            <div class="search_name fl">宝宝编号</div>
            <div class="search_cont fl">{{ post_form.code }}</div>
          </div>
        </template>
      </div>
      <div
        class="add_block oa select-baby"
        v-if="step == 0 && studentList.length > 0"
      >
        <div class="tl green-text tip-select">请选择您的宝宝：</div>
        <div
          class="add_search_res"
          :class="{ active: index == active }"
          v-for="(item, index) in studentList"
          :key="index"
          @click="getInfo(item, index)"
        >
          <div class="add_search_res_1 oh">
            <div class="checkbox fl"></div>
            <div class="fl">宝宝姓名：{{ item.name }}</div>
          </div>
          <div class="add_search_res_2 oh flex">
            <div>班级：{{ item.clazzName }}</div>
            <div>性别：{{ item.sex }}</div>
            <div>编号：{{ item.code }}</div>
          </div>
        </div>
      </div>

      <div class="add_block oh" v-if="step == 1 || step == 3 || step == 4">
        <div class="add_title">家长信息</div>

        <div class="add_search_item tl" v-if="custom === 'true'">
          <div class="search_name fl">家长姓名</div>
          <div class="search_input fl required" v-if="step == 1">
            <input
              type="text"
              placeholder="请输入家长姓名"
              v-model="post_form.kinsfolkName"
              @blur="required(post_form.kinsfolkName, '家长姓名')"
            />
          </div>
          <div class="search_cont fl" v-else>{{ post_form.kinsfolkName }}</div>
        </div>

        <div class="add_search_item tl">
          <div class="search_name fl">关系</div>
          <div class="search_input fr required" v-if="step == 1">
            <input
              type="text"
              placeholder="请输入家长关系"
              v-model="post_form.role"
              @blur="required(post_form.role, '家长关系')"
            />
          </div>
          <div class="search_cont fl" v-else>{{ post_form.role }}</div>
        </div>

        <div class="add_search_item tl" v-if="custom === 'true'">
          <div class="search_name fl">联系方式</div>
          <div class="search_input fr required" v-if="step == 1">
            <input
              type="number"
              placeholder="请输入您的联系方式"
              v-model="post_form.phone"
              @blur="required(post_form.phone, '手机号码')"
            />
          </div>
          <div class="search_cont fl" v-else>{{ post_form.phone }}</div>
        </div>
        <div v-if="step == 1" class="add_search_item tl red-text">
          温馨提示：带 * 号为必填项
        </div>
      </div>
      <div class="add_block oh" v-if="step == 2">
        <div class="add_title">宝宝人脸信息录入</div>
        <photograph
          ref="Upload"
          @accept-file="acceptFile"
          @reset-file="resetFile"
        ></photograph>
        <div class="add_block">
          <div
            v-if="step == 2"
            class="tl red-text fl face_tip"
            style="padding-top: 0.2rem"
          >
            温馨提示：此步骤可跳过
          </div>
          <div class="tr fr face_tip" style="font-size: 1.8rem" @click="step++">
            跳过
          </div>
        </div>
      </div>
      <div v-if="step == 3" class="add_search_item tc red-text">
        温馨提示：请确认信息无误后再提交审核！
      </div>
      <div v-if="step == 4" class="add_search_item tl red-text" style="height:auto;margin:3rem auto">
        温馨提示：信息审核中，可关闭界面，审核结果之后会 进行推送，请耐心等待！
      </div>
      <div class="btn-list flex">
        <div class="next-btn" @click="step--" v-if="step > 0 && step < 4">
          上一步
        </div>
        <div class="next-btn" @click="nextStep" v-if="step < 3">下一步</div>
        <div class="next-btn" @click="submit" v-if="step == 3">提交审核</div>
        <div class="next-btn" v-if="step == 4" @click="closeWin">关闭</div>
      </div>
      <div class="tip-block tl" v-if="bindTips[step]">
        <p>填写步骤：</p>
        <p v-for="(txt, index) in bindTips[step]" :key="index">
          第{{ index + 1 }}步:{{ txt }}
        </p>
      </div>
    </div>
  </div>
</template>


<script>
import photograph from "@/components/photograph.1.vue";
import editableSelect from "@/components/editable-select.vue";
import wx from "weixin-js-sdk";
export default {
  components: {
    editableSelect,
    photograph,
  },
  data() {
    return {
      custom: this.$Cookies.get("custom"),
      step: 0,
      active: -1,
      checking: false,
      search_form: {
        clazzName: "",
        clazzId: "",
        openId: this.$Cookies.get("openId"),
        name: "",
        sex: "男",
        icCard: "",
        birthday: "",
        code: "",
        kinsfolkName: "",
        phone: "",
        role: "",
        faceImage: "",
      },
      post_form: {},
      studentList: [],
      clazzList: [],
      bindTips: [
        [
          "请输入宝宝姓名；",
          "请选择宝宝班级；",
          "请输入宝宝IC卡号（非必填项，选定宝宝信息后会自动填充）；",
          "在弹出的宝宝信息中选择您要绑定的宝宝；",
          "确认信息无误后，请点击下一步。 ",
        ],
        [
          "请输入家长姓名（不显示则无需填写）；",
          "请输入关系，例如：爸爸、妈妈等；",
          "请输入您的手机号码（不显示则无需填写）；",
          "确认信息无误后，请点击下一步。",
        ],
      ],
    };
  },
  methods: {
    closeWin() {
      wx.closeWindow();
    },
    selectClazz() {
      let clazzId = this.search_form.clazzId;
      let clazzList = this.clazzList;
      let clazz = clazzList.filter((clazz) => clazz.id == clazzId)[0];
      this.search_form.clazzName = clazz.gradeName + "-" + clazz.name;
      this.search_form.kindergartenId = clazz.kindergartenId;
      this.queryFn();
    },
    getInfo(item, index) {
      if (this.active != index) {
        this.active = index;
        Object.assign(this.post_form, item);
        this.post_form.studentId = item.id;
      } else {
        this.active = -1;
        Object.assign(this.post_form, {
          clazzName: this.search_form.clazzName,
          clazzId: this.search_form.clazzId,
          openId: this.$Cookies.get("openId"),
          name: this.search_form.name,
          sex: this.search_form.sex,
          birthday: "",
          code: "",
          kinsfolkName: "",
          phone: "",
          role: "",
          faceImage: "",
        });
      }
    },
    fetchClazzList() {
      this.$http.fetAllClazzList().then((resp) => {
        this.clazzList = resp.data;
        if (this.clazzList.length > 0) {
          let clazz = this.clazzList[0];
          this.search_form.clazzId = clazz.id;
          this.search_form.clazzName = clazz.gradeName + "-" + clazz.name;
          this.search_form.kindergartenId = clazz.kindergartenId;
        }
      });
    },
    submit() {
      // this.$toast.show('审核提交中', 'loading');
      //提交数据
      this.post_form.openId = this.$Cookies.get("openId");
      this.$http.registerBind(this.post_form).then((resp) => {
        this.$toast.hide();
        this.checking = true;
        this.step++;
      });
    },
    acceptFile(fileName) {
      this.post_form.faceImage = fileName;
    },
    resetFile() {
      this.post_form.faceImage = "";
    },
    required(value, txt) {
      if (this.custom === "false") {
        if (txt === "手机号码" || txt === "家长姓名") {
          // this.post_form.phone = this.$route.query.phone;
          // this.post_form.kinsfolkName = this.$route.query.name;
          return true;
        }
      }
      if (!value) {
        this.$weui.topTips(txt + "不能为空");
        return false;
      }
      if (txt === "手机号码") {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          this.$weui.topTips("输入的手机号码有误");
          return false;
        }
      }
      return true;
    },
    nextStep() {
      let f1 = this.required(this.search_form.name, "宝宝姓名");
      if (this.step == 0) {
        if (this.active == -1) {
          this.$weui.topTips("请选择要绑定的宝宝");
          return;
        }
        // if (this.active == -1) {
        //   Object.assign(this.post_form, {
        //     clazzName: this.search_form.clazzName,
        //     clazzId: this.search_form.clazzId,
        //     openId: this.$Cookies.get("openId"),
        //     name: this.search_form.name,
        //     sex: this.search_form.sex,
        //     birthday: "",
        //     code: "",
        //     kinsfolkName: "",
        //     phone: "",
        //     role: "",
        //     faceImage: "",
        //   });
        // }
        if (f1) this.step++;
      } else if (this.step == 1) {
        let f2 = this.required(this.post_form.birthday, "宝宝出生年月");
        let f3 = this.required(this.post_form.kinsfolkName, "家长姓名");
        let f4 = this.required(this.post_form.role, "家长关系");
        let f5 = this.required(this.post_form.phone, "手机号码");
        if (f2 && f3 && f4 && f5) this.step++;
      } else {
        this.step++;
      }

      if(this.step==2){
        this.step=3;
      }
    },
    queryFn() {
      //查找学生信息
      let f1 = this.search_form.name != "";
      this.active = -1;
      this.studentList = [];
      if (f1) {
        this.$http.fetchKindergartenStu(this.search_form).then((resp) => {
          this.studentList = resp.data;
        });
      }
    },
    getParameterFromUrl(val) {
      let uri = window.location.href;
      if (!uri) {
        uri = window.location.search;
      }
      let re = new RegExp("" + val + "=([^&?]*)", "ig");
      return uri.match(re) ? uri.match(re)[0].substr(val.length + 1) : null;
    },
  },
  created() {
    this.fetchClazzList();
  },
};
</script>


<style scoped>
.red-text {
  color: #ff3246;
  font-size: 1.4rem;
}
.green-text {
  color: #36c12d;
  font-size: 1.4rem;
}
.tip-block {
  width: 33.5rem;
  margin: 1.5rem auto;
  line-height: 2.5rem;
  color: #4a4a4a;
}
.add_block {
  width: calc(100% - 20px);
  margin: 1.5rem auto;
  height: auto;
  border-radius: 6px;
  background: #ffffff;
}

.add_title {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  font-weight: bold;
  color: rgba(16, 16, 16, 1);
}

.add_search_item {
  width: 90%;
  margin: 0 auto 1rem auto;
  height: 3rem;
  line-height: 3rem;
}

.search_name {
  width: 6.5rem;
  height: 100%;
  margin-right: 1.5rem;
  font-size: 1.6rem;
  color: rgba(16, 16, 16, 1);
  text-align-last: justify;
}

.search_cont {
  width: calc(100% - 8rem);
  height: 100%;
  font-size: 1.6rem;
  color: rgba(16, 16, 16, 1);
}

.required {
  position: relative;
}

.required::after {
  content: "*";
  position: absolute;
  color: red;
  right: -1rem;
  top: -0;
}

.search_input {
  width: calc(100% - 8rem);
  height: 100%;
  border: 1px solid rgba(238, 238, 238, 1);
  box-sizing: border-box;
}

.search_input input,
.search_input select {
  position: relative;
  box-sizing: border-box;
  background: none;
  border: 0px;
  outline: none;
  height: 100%;
  width: 100%;
  font-size: 1.4rem;
  padding: 0 0.5rem;
}

.add_search_res {
  width: 100%;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(234, 234, 234, 1);
  font-size: 1.4rem;
}

.add_search_res_1,
.add_search_res_2 {
  width: 90%;
  box-sizing: border-box;
  margin: auto;
}

.add_search_res_1 {
  margin-bottom: 1rem;
}
.add_search_res_2 {
  justify-content: space-between;
  flex-wrap: wrap;
}
.add_search_res_1 > div,
.add_search_res_2 > div {
  text-align: left;
}
.checkbox {
  width: 1.6rem;
  height: 1.6rem;
  background: #ffffff;
  border: 1px solid #bbb;
  border-radius: 1px;
  margin-right: 1rem;
  margin-top: 0.2rem;
}
.add_search_res.active {
  background: #def9dc;
}
.add_search_res.active .checkbox {
  background: url(../../../static/img/baby-check.png) no-repeat center/90%
    #ffffff;
}
.face-tips {
  font-size: 1.8rem;
}

.face-icon {
  display: inline-block;
  margin: 4rem auto;
}

.btn-list {
  width: 100%;
  margin-bottom: 2rem;
  justify-content: center;
}

.next-btn {
  width: 16rem;
  height: 4rem;
  line-height: 4rem;
  border-radius: 4px;
  background-color: #36c12d;
  color: #ffffff;
  font-size: 1.6rem;
  text-align: center;
  margin: 0 1rem;
}

.select-baby {
  max-height: calc(100% - 30rem);
}
.tip-select {
  margin: 1rem;
}
.face_tip {
  margin: 0 2rem 2rem;
}
</style>
